/**
  * Menu Theme: vertical1
  * Theme ID: v1
  * Author: Minwe (minwe@yunshipei.com)
  */

.am-menu-vertical1 {
  @vertical-padding-vertical: 10px;
  @vertical-padding-horizontal: 15px;
  @vertical-lv1-a-height: 49px;
  @vertical-lv2-a-height: 44px;

  @vertical-lv1-bg-color: #F5F5F5;
  @vertical-color: #333;
  @vertical-hover-bg-color: #ddd;
  @vertical-hover-color: #222;
  @vertical-nested-color: #444;
  @vertical-nested-hover-color: #333;

  @vertical-bd-color: rgba(0, 0, 0, 0.15);

  @vertical-lv2-left-padding: 2rem;

  border-bottom: 1px solid @vertical-bd-color;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);

  .am-menu-sub {
    padding: 0;
    font-size: 1.4rem;
    display: none;
    a {
      border-bottom: 1px solid @vertical-bd-color;
      padding-left: @vertical-lv2-left-padding;
    }
    li:last-child a {
      border-bottom: none;
    }
  }

  a {
    &::after {
      .am-icon-font;
    }
  }

  & > li {
    &.am-parent {
      > a {
        .transition(all 0.3s);
        &::after {
          content: @fa-var-angle-right;
          position: absolute;
          right: 1.5rem;
          top: 1.3rem
        }
      }
      &.am-open {
        > a {
          border-bottom: 1px solid @vertical-bd-color;
          box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
          &::after {
            content: @fa-var-angle-down;
          }
        }
      }
    }
    > a {
      position: relative;
      color: @vertical-color;
      background-color: @vertical-lv1-bg-color;
      border-top: 1px solid @vertical-bd-color;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
      height: @vertical-lv1-a-height;
      line-height: @vertical-lv1-a-height;
      text-indent: 10px;
      padding: 0;

    }
  }

  .am-menu-lv2{
    & > li{
      & > a{

        height: @vertical-lv2-a-height;
        line-height: @vertical-lv2-a-height;
        text-indent: 15px;
        padding: 0;

      }

    }
  }

  & > .am-open > a,
  & > li > a:hover,
  & > li > a:focus {
    /* 1 */
    background-color: @vertical-hover-bg-color;
    color: @vertical-hover-color;
    outline: none; /* 2 */
  }

  /*
  * Nested items
  */
  & ul a {
    color: @vertical-nested-color;
  }
  & ul a:hover {
    color: @vertical-nested-hover-color;
  }

  .hook-am-menu-vertical1;

  @media (min-width: @breakpoint-md) {
    & {
      // level 1
      background-color: @vertical-lv1-bg-color;
      a {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }

      & > li {
        float: left;
        width: auto;
        clear: none !important;
        display: inline-block;

        &.am-parent {
          > a {
            &::after {
              position: static;
              content: @fa-var-angle-down;
              .transition(all 0.15s);
            }
          }
          &.am-open {
            a {
              border-bottom: none;
              &::after {
                .rotate(-180deg);
              }
            }
            .am-menu-sub {
              background-color: @vertical-hover-bg-color;
            }
          }
        }
      }

      .am-menu-sub {
        position: absolute;
        z-index: 1999;
        left: 0;
        right: 0;
        li {
          width: auto;
          float: left;
          clear: none;
        }
      }

    }
  }
}

.hook-am-menu-vertical1() {
}